<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="css/mui.min.css" rel="stylesheet"/>
	<link rel="stylesheet" type="text/css" href="css/common.css"/>
    <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
	<header>
		<h1>垃圾分类</h1>
		<ul>
			<li>
				<i class="iconfont icon-huishou"></i>
				<span>回收站</span>
			</li>
			<li>
				<i class="iconfont icon-lajigarbage8"></i>
				<span>垃圾站</span>
			</li>
			<li id="class">
				<i class="iconfont icon-leimupinleifenleileibie"></i>
				<span>垃圾分类</span>
			</li>
		</ul>
	</header>
	<footer>
		<i class="iconfont icon-shengboyuyinxiaoxi" id="search"></i>
		<ul>
			<li>
				<i class="iconfont icon-guanyu"></i>
			</li>
			<li>
				<span>语音查找</span>
			</li>
			<li id="find">
				<i class="iconfont icon-fangdajing"></i>
			</li>
		</ul>
	</footer>
</body>
<script src="js/mui.min.js"></script>
<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	mui.init();
	mui.plusReady(function(){
		// 设置状态栏样式
		 plus.navigator.setStatusBarBackground('#f2f1f0');
		 plus.navigator.setStatusBarStyle('dark');
		 // 触发语音识别
		 mui('footer').on('tap','#search',function(){
			 fStarRecognize()
		 })
		 // 封装语音识别函数
		 function fStarRecognize(){
			 var options = {
				 engine: 'baidu'
			 }
			 			
			 plus.speech.startRecognize( options, function(data){
				mui.openWindow({
					url: 'detail.html',
					id: 'deatail',
					extras:{
						title:encodeURI(data)
					},
					show:{
						autoShow: true,
						title:'加载中'
					}
				})
			 }, function(){
				 mui.toast('语音识别失败')
			 } );
			 setTimeout(fStopRecognize,10000)
		 }
		 // 停止语音识别
		 function fStopRecognize(){
			 plus.speech.stopRecognize();
		 }
		 // 跳转至垃圾分类页面
		 mui('header ul').on('tap','#class',function(){
			 mui.openWindow({
			 	url: 'class.html',
			 	id: 'class',
			 	show:{
			 		autoShow: true,
			 		title:'加载中'
			 	}
			 })
		 })
		 // 跳转至搜索页面
		 mui('footer ul').on('tap','#find',function(){
			 mui.openWindow({
			 	url: 'search.html',
			 	id: 'search',
			 	show:{
			 		autoShow: true,
			 		title:'加载中'
			 	}
			 })
		 })
	})
</script>
</html>